<!DOCTYPE html>
<html>
  <head>
    <style>
      #box {
        width: 100px;
        height: 100px;
        border: 10px solid green;
        padding: 25px;
        margin: 25px;
      }
    </style>
  </head>
  <body>
    <div style="text-align: center;margin-top: 150px;">
      <input type="text" id="width" name="Width" placeholder="Width">
      <input type="text" id="height" name="Height" placeholder="Height">
      <button class="submit" onclick="myFunction()">Submit</button>
      <div id="box" style="margin-left: 44%;"></div>
      <div id="box-dimension-text">I am of height 100px and widht 100px</div>
    </div>
  </body>
</html>

<script type="text/javascript">
  function myFunction() {
    var height = document.getElementById("width").value + 'px';
    var width = document.getElementById("height").value + 'px';
    tobeChanged = document.getElementById("box");
    tobeChanged.style.height = height;
    tobeChanged.style.width = width;
    document.getElementById("box-dimension-text").innerHTML = "I am of height " + height + " and" + " width " +  width
  }
</script>
